{extend name="other/public"}
{block name='css'}
  <style>
    .c1{width: 50px;height: 50px;}
    .layui-table .c2{text-align: center;}
    .c3{padding-left: 0;text-align: center;}
    .layui-form-label{width: auto;padding-left: 0;}
    .c4{float: right;margin-top: 3px;}
    .c5{padding:20px 20px 5px;}
    .c5 span{display: inline-block;margin-right: 10px;}
  </style>
{/block}

{block name='content'}
<div class="layui-fluid" id="app" v-cloak>
  <div class="layui-card">
    <div class="layui-card-header u-flex">
      <div>新闻管理</div>
      <div><a href="{:url('news/form_data')}"><button class="layui-btn layuiadmin-btn-list">添加新闻</button></a></div>
    </div>
    <div class="layui-form layui-card-header layuiadmin-card-header-auto"  lay-filter="anForm">
      <div class="layui-form-item u-flex">
        <div class="layui-inline">
          <label class="layui-form-label">新闻标题</label>
          <div class="layui-input-inline" style="width:300px">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">新闻类型</label>
          <div class="layui-input-inline">
            <select name="type">
              <option value="">请选择标签</option>
              {volist name="typeList" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search"> 搜索</button>
        </div>
        <!-- <a  class="layui-btn layuiadmin-btn-list c4"  lay-text="添加产品" lay-href="{:url('form_data')}">添加产品</a> -->
      </div>
    </div>
    {if ( $search != '') OR ( $search_type != '') }
      <div class="c5">
        <span>筛选 ：</span>
        {notempty  name="search"}
          <button type="button" class="layui-btn layui-btn layui-btn-xs layui-btn-danger" @click="delSearch(1)">
            <i class="layui-icon">&#x1006;</i> 关键词 ：{$search}
          </button>
        {/notempty}
        {notempty  name="search_type"}
          <button type="button" class="layui-btn layui-btn layui-btn-xs layui-btn-danger" @click="delSearch(2)">
            <i class="layui-icon">&#x1006;</i> 
            分类 ：
            {volist name="typeList" id="vo"}
              {eq name="vo.id" value="$search_type"}{$vo.name}{/eq}
            {/volist}
          </button>
        {/notempty}
      </div>
    {/if}
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <table class="layui-table">
          <colgroup>
            <col width="90">
            <col>
            <col width="120">
            <col width="120">
            <col width="220">
            <col width="125">
          </colgroup>
          <thead>
            <tr>
              <th class="c2">封面图</th>
              <th>产品名称</th>
              <th>类型</th>
              <th class="c2">发布状态</th>
              <th class="c2">更新时间</th>
              <th class="c2">操作</th>
            </tr> 
          </thead>
          <tbody v-if="listData.length > 0">
            <tr v-for="(v,index) in listData" :key="index">
              <td class="c2"><img class="c1" :src="v.cover" alt=""></td>
              <td>{{v.title}}</td>
              <td>{{v.type_name}}</td>
              <td class="c2">
                <input type="checkbox"  name="switch" lay-skin="switch"  lay-text="已发布|不发布" v-if="Number(v.is_show) == 1" checked>
                <input type="checkbox"  name="switch" lay-skin="switch"  lay-text="已发布|不发布" v-else>
              </td>
              <td class="c2">{{v.up_time}}</td>
              <td>
                <a :href="'{:url('form_data')}?id='+v.id"><button  type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button></a>
                <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" @click="delData(v.id,index)">删除</button>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="8" class="c2" style="line-height: 100px;">没有找到相关数据</td>
            </tr>
          </tbody>
        </table>
      </form>
      <div style="padding-top: 10px;">
        <div id="page"></div>
      </div>
    </div>
  </div>
</div>
{/block}

{block name='js'}
<script>
  const listData = {$listData|raw};
  const anVue = new Vue({
    el:"#app",
    data:{
      listData:listData
    },
    methods: {
      delSearch(type){
        if(type==1){
          location.href = "{:url('list_data')}?search_type={$search_type}&search="
        }else{
          location.href = "{:url('list_data')}?search_type=&search={$search}"
        }
      },
      delData(id,index){
        let _this = this;
        layer.msg('删除后将不能恢复', {
          time: 0 //不自动关闭
          ,btn: ['直接删除', '取消']
          ,yes: function(index){
            layer.close(index);
            $.post("{:url('del_data')}",{id},(res)=>{
              if(res.code==1){
                _this.listData.splice(index, 1);
              }
            },'json')
          }
        });
      },
    },
  })
  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','form','laypage'], function(){
    var form = layui.form;
    var $ = layui.$

    //监听提交
    form.on('submit(search)', function(data){
      if(data.field.type != '' || data.field.title != ''){
        location.href = "{:url('list_data')}?search_type="+data.field.type+"&search="+data.field.title
        return false;
      }else{
        layer.msg('请操作需要筛选的类型')
      }
    });

    //表单初始化赋值
    form.val("anForm", {
      "type":"{$search_type}",
      "title":"{$search}"
    });

    const search_type = "{$search_type}";
    const search = "{$search}";

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      laypage.render({
        elem: 'page',
        limit:10,
        count:'{$totalNum}',
        jump: function(obj, first){
          if(!first){
            $.get("{:url('list_data')}",{get:1,page:obj.curr,search_type,search},(res)=>{
              if(res.code==1){
                anVue.$data.listData = res.data;
              }
            },'json')
          }
        }
      });
    });
  });
  </script>
{/block}